<!--
 * @Author: C.
 * @Date: 2021-06-11 13:21:10
 * @LastEditTime: 2021-06-17 16:08:26
 * @Description: file content
-->
<template>
  <div class="jv-operation-list"
       :style="{width:width}">
    <!-- 最多九个 -->
    <el-button-group>
      <el-button size="mini"
                 v-for="item in currentBtnList"
                 :key="item.name"
                 :disabled="item.disabled"
                 @click="btnClick(item)">
        {{item.name}}
      </el-button>
      <!-- 下拉更多 -->
      <el-dropdown v-if="extendBtnList.length!==0"
                   style="border-left:1px solid #dcdfe6"
                   @command="btnClick">
        <!-- 更多 -->
        <el-button size="mini">
          更多
          <i class="el-icon-arrow-down el-icon--right"
             style="font-size:12px"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in extendBtnList"
                            :key="item.name"
                            :command="item"
                            :disabled="item.disabled">{{item.name}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-button-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  created () {

  },
  computed: {
    // 当前显示列
    currentBtnList () {
      return this.btnList.slice(0, this.max)
    },
    // 延展列
    extendBtnList () {
      return this.btnList.slice(this.max, 999)
    }
  },
  methods: {
    btnClick (e) {
      // if (e.confirmMsg) {
      //   this.$confirm(e.confirmMsg, '确认信息', {
      //     distinguishCancelAndClose: true,
      //     cancelButtonText: '取消',
      //     confirmButtonText: '确认'
      //   }).then(() => {
      //     this.$emit('confirm', e.name)
      //   })
      // } else {
      //   this.$emit('confirm', e.name)
      // }
      this.$emit('confirm', e)
    }
  },
  props: {
    // 宽度
    width: {
      type: String,
      default: 'auto'
    },
    // 按钮组
    btnList: {
      type: Array,
      default: () => [{
        name: '新增',
        disabled: false
      },
      {
        name: '删除',
        disabled: false,
        confirmMsg: '确认删除？'
      }]
    },
    max: {
      type: [Number, String],
      default: 6
    }
  }

}
</script>

<style lang="scss">
@import "../../styles/mixin.scss";
.jv-operation-list {
  @include flexBox($jc: flex-end);
  // background-color: pink;
}
.el-button-group > .el-dropdown > .el-button {
  padding: 7px 15px;
}
</style>
